<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--
        	作者：460575807@qq.com
        	时间：2017-07-11
        	描述：基资源写在前。有相互引用关系的，被引用的写在前面。有互相引用关系的，最好写在同一层级目录，
        	确保能找到资源。
        -->
		<!--标准mui.css-->
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<!--App自定义的css-->
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>

		<!--
        	作者：460575807@qq.com
        	时间：2017-07-11
        	描述：请务必在mui.js/css后中引用
        -->
		<script type="text/javascript">
			mui.init()

			function showPicker() {
				var picker = new mui.PopPicker({
					buttons: ['取消吧', '好的咯'],
					layer: 1
				});
				picker.setData([{
					value: 'zz',
					text: '智子'
				}]);

				picker.show(function(selectItems) {
					console.log("selected text :" + selectItems[0].text); //智子
					console.log("selected value :" + selectItems[0].value); //zz 
				});

			}

			function showDatePicker() {
				var dtPicker = new mui.DtPicker();
				dtPicker.show(function(selectItems) {
					console.log("选择的年份：" + selectItems.y); //{text: "2016",value: 2016} 
					console.log("选择的月份：" + selectItems.m); //{text: "05",value: "05"} 
				})
			}
		</script>
	</head>

	<body>
		<div class="mui-card-content" align="center" style="padding: 18px;">
			<button type="button" class="mui-btn-block" onclick="showPicker()">show picker</button>
			<button type="button" class="mui-btn-block" onclick="showDatePicker()">show datePicker</button>
		</div>

	</body>

</html>